<template>
  <div>
    <div class="Historicalsearch">
      <div class="delete">
        <span>历史记录</span>
        <van-icon name="delete-o" size="0.2rem" @click="getClearhistoryList" />
      </div>
      <div class="vantag">
        <van-tag plain type="primary" class="span" color="#969799" v-for="(his,index) in historyKeywordList" :key="index" @click="gethisname(his)">{{his}}</van-tag>
      </div>
    </div>
    <div class="Popularsearch">
      <div class="Popular">
        <span>热门搜索</span>
        <div class="vantag1">
          <van-tag plain type="primary" class="span1" :color="hot.is_hot==1?'darkred':'#969799'" v-for="(hot,index) in hotKeywordList" :key="index" @click="gethisname(hot.keyword)">{{hot.keyword}}</van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Historicalsearch',
  props: ['hotKeywordList', 'historyKeywordList'],
  methods: {
    getClearhistoryList() {
      this.$store.dispatch('getClearhistoryList')
    },
    gethisname(e) {
      this.$emit('closepop', 3)
      this.$emit('transmit', e)
    }
  }
}
</script>

<style lang="less" scoped>
.Historicalsearch {
  .delete {
    background-color: #fff;
    padding: 2% 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    span {
      font-size: 0.2rem;
    }
  }
  .vantag {
    background-color: #fff;
    padding-left: 2%;
    padding-bottom: 3%;
    padding-top: 2%;
    .span {
      margin-left: 2%;
      margin-right: 2%;
      margin-bottom: 3%;
    }
  }
}
.Popularsearch {
  margin-top: 5%;
  background-color: #fff;
  .Popular {
    font-size: 0.2rem;
    .vantag1 {
      background-color: #fff;
      padding-left: 2%;
      padding-bottom: 3%;
      padding-top: 2%;
      display: flex;
      flex-wrap: wrap;
      .span1 {
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 3%;
      }
    }
  }
}
</style>